<!DOCTYPE html>
<%@page import="mobi.weq.model.User"%>
<%@page import="mobi.weq.util.Util"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Home</title>
<jsp:include page="/jsp/templates/header.jsp" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/stats.js"></script>
<link rel="stylesheet" type="text/css" href="css/home.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
	<!-- Fixed navbar -->
	<header class="title">
		<b>WeQ.Mobi</b>
	</header>
	<div class="content">
		<%
			User user = Util.getUserFromSession(request, response);
			if (user != null) {
		%>
		<div class="panel panel-default">
			<div class="panel-heading" style="text-align: center;">
				<div class="btn-toolbar" role="toolbar" id="air-quality-indicator" style="margin: auto; width: 336px;">
					<div class="btn-group">
						<span class="band-name">Low</span>
						<span class="btn btn-sm btn-default dark-low-1">1</span>
						<span class="btn btn-sm btn-default dark-low-2">2</span>
						<span class="btn btn-sm btn-default dark-low-3">3</span>
					</div>
					<div class="btn-group">
						<span class="band-name">Moderate</span>
						<span class="btn btn-sm btn-default dark-moderate-1">4</span>
						<span class="btn btn-sm btn-default dark-moderate-2">5</span>
						<span class="btn btn-sm btn-default dark-moderate-3">6</span>
					</div>
					<div class="btn-group">
						<span class="band-name">High</span>
						<span class="btn btn-sm btn-default dark-high-1">7</span>
						<span class="btn btn-sm btn-default dark-high-2">8</span>
						<span class="btn btn-sm btn-default dark-high-3">9</span>
					</div>
					<div class="btn-group" style="text-align: center;">
						<span class="band-name very-high-band">Very High</span>
						<span class="btn btn-sm btn-default dark-very-high">10</span>
					</div>
				</div>
				<blockquote id="health-message" style="margin-top: 10px"></blockquote>
			</div>
			<div class="panel-body">
				<div id="chart_div" style="width: 100%; height: 400px;"></div>
			</div>
			<div class="panel-footer">
				<div class="row">
					<div class="col-xs-6">
						<select class="form-control" id="select-substance">
							<option value="no2">NO2</option>
							<option value="so2">SO2</option>
							<option value="o3">O3</option>
							<option value="pm10">PM10</option>
							<option value="pm2p5">PM2.5</option>
						</select>
					</div>
					<div class="col-xs-6">
						<select class="form-control" id="select-time-range">
							<option value="1">24 Hours</option>
							<option value="7">7 Days</option>
							<option value="30">30 Days</option>
						</select>
					</div>
				</div>
				<div class="alert alert-info" role="alert" id="address" style="margin-top: 10px;"></div>
			</div>
		</div>
		<%
			}
		%>
	</div>
	<jsp:include page="/jsp/templates/footer.jsp" />
</body>
</html>